<template>
  <div id="BarDevicenet"></div>
</template>

<script>
import * as echarts from 'echarts/core'
import {
  TooltipComponent,
  GridComponent,
  LegendComponent
} from 'echarts/components'
import { BarChart } from 'echarts/charts'
import { CanvasRenderer } from 'echarts/renderers'
export default {
  name: 'BarDevicenet',
  data () {
    return {
      myChart: null,
      // 数据
      devicenet: [
        {
          a: '独立式感烟探测器',
          b: 42,
          c: 4
        },
        {
          a: '用户信息传输装置',
          b: 0,
          c: 25
        },
        {
          a: '水压探测器',
          b: 22,
          c: 0
        },
        {
          a: '可燃气体探测器',
          b: 1,
          c: 0
        },
        {
          a: '水位探测器',
          b: 14,
          c: 1
        }
      ],
      // 在线设备
      online: [],
      // 离线设备
      offline: [],
      // 名称
      bartitle: []
    }
  },
  created () {
    echarts.use([
      TooltipComponent,
      GridComponent,
      LegendComponent,
      BarChart,
      CanvasRenderer
    ])
  },
  mounted () {
    // 数组对象排序
    // this.devicenet.sort(this.compareValues('b'))
    this.devicenet.sort((a, b) => {
      return a.b - b.a
    })
    console.log('this.devicenet', this.devicenet)
    // 名称
    this.bartitle = this.devicenet.map(v => v.a)
    // 在线设备
    this.online = this.devicenet.map(v => Number(v.b))
    // 离线设备
    this.offline = this.devicenet.map(v => Number(v.c))
    // 找到这个容器
    this.myChart = echarts.init(this.$el)
    const that = this
    // 配置项
    let option = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          // Use axis to trigger tooltip
          type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
        }
      },
      // 工具箱-下载
      toolbox: {
        feature: {
          saveAsImage: {}
        }
      },
      legend: {
        textStyle: {
          color: '#1e1e1e',
          fontSize: 11
        },
        // top:
        // right:
        formatter: function (parame) {
          console.log('parame', parame)
          console.log('parame', parame == '在线设备')
          if (parame == '在线设备') {
            let a = that.online.reduce((total, obj) => {
              return total + obj
            }, 0)
            console.log('a', a)
            return parame + '(' + a + '台)'
          } else {
            let a = that.offline.reduce((total, obj) => {
              return total + obj
            }, 0)
            return parame + '(' + a + '台)'
          }
        }
      },
      // 整个图标位置调节
      grid: {
        left: '0',
        right: '4%',
        bottom: '0',
        // 在父元素内等比缩放
        containLabel: true
      },
      xAxis: {
        type: 'value',
        show: false
      },
      yAxis: {
        type: 'category',
        data: this.bartitle
      },
      series: [
        {
          name: '在线设备',
          type: 'bar',
          stack: 'total',
          label: {
            show: false
          },
          itemStyle: {
            color: '#3788FF'
          },
          // 数据静态展示时候-是否需要隐藏其他数据
          emphasis: {
            // focus: 'series'
          },
          data: this.online
        },
        {
          name: '离线设备',
          type: 'bar',
          stack: 'total',
          label: {
            width: '15px',
            show: true,
            position: 'right',
            // color: '#fff'
            formatter: function (params) {
              console.log('params', params)
              console.log('params.dataIndex', params.dataIndex)
              var index = params.dataIndex
              console.log('this.online', that.online)
              console.log('index', index)
              return that.online[index] + '/' + that.offline[index]
            }
          },
          itemStyle: {
            color: '#A5C9FF'
          },
          // 数据静态展示时候-是否需要隐藏其他数据
          emphasis: {
            // focus: 'series'
          },
          data: this.offline
        }
      ]
    }
    // 渲染数据
    this.myChart.setOption(option)
  },
  methods: {
    // 数组对象排序
    // 升序计算
    compareValues (key, order = 'asc') {
      return function innerSort (a, b) {
        if (!a.hasOwnProperty(key) || !b.hasOwnProperty(key)) {
          // 该属性在任何一个对象上都不存在
          return 0
        }

        const varA = typeof a[key] === 'string' ? a[key].toUpperCase() : a[key]
        const varB = typeof b[key] === 'string' ? b[key].toUpperCase() : b[key]

        let comparison = 0
        if (varA > varB) {
          comparison = 1
        } else if (varA < varB) {
          comparison = -1
        }
        return order === 'desc' ? comparison * -1 : comparison
      }
    }
  }
}
</script>
<style lang="scss" scoped>
#BarDevicenet {
  width: 100%;
  height: 100%;
}
</style>
